import React, { Component } from 'react'
import { Flex, WingBlank, WhiteSpace ,Toast} from 'antd-mobile'

import { Link } from 'react-router-dom'

import NavHeader from '../../components/NavHeader'

import styles from './index.module.css'

import axios from 'axios'
import { withFormik, Form, Field, ErrorMessage  } from 'formik' // 导入表单验证的高阶组件
import * as yup from 'yup' // 将yup中的所有按需导出放到yup对象身上

// 验证规则：
const REG_UNAME = /^[a-zA-Z_\d]{5,8}$/
const REG_PWD = /^[a-zA-Z_\d]{3,12}$/

class Registe extends Component {
  render() {
    return (
      <div className={styles.root}>
        {/* 顶部导航 */}
        <NavHeader className={styles.navHeader}>注册</NavHeader>
        <WhiteSpace size="xl" />
        <WingBlank>
          <Form>
            <div className={styles.formItem}>
              <label className={styles.label}>用户名</label>
              <Field className={styles.input}  placeholder="请输入账号" name='username'/>
            </div>
            <ErrorMessage  className={styles.error} name='username' component='div'/>

            <div className={styles.formItem}>
              <label className={styles.label}>密码</label>
              <Field className={styles.input} type="password" placeholder="请输入密码" name='password'/>
            </div>
            <ErrorMessage  className={styles.error} name='password' component='div'/>
            <div className={styles.formItem}>
              <label className={styles.label}>重复密码</label>
              <Field className={styles.input} type="password"  placeholder="请重新输入密码" name='nextpassword'/>
            </div>
            <ErrorMessage  className={styles.error} name='nextpassword' component='div'/>
            <div className={styles.formSubmit}>
              <button className={styles.submit} type="submit">
                注册
              </button>
            </div>
          </Form>
          <Flex className={styles.backHome} justify="between">
            <Link to="/home">点我回首页</Link>
            <Link to="/login">已有账号，去登录</Link>
          </Flex>
        </WingBlank>
      </div>
    )
  }
}
Registe = withFormik({
  mapPropsToValues: _ => ({username: '', password: '', nextpassword: ''}), // 提供表单的状态值state
  validationSchema: yup.object().shape({ //在 withFormik 中添加配置项 validationSchema，使用 Yup 添加表单校验规则
    username: yup.string().required('账号为必填项').matches(REG_UNAME,'长度为5到8位，只能出现数字、字母、下划线'),
    password: yup.string().required('密码为必填项').matches(REG_PWD,'长度为5到12位，只能出现数字、字母、下划线'),
    nextpassword: yup.string().required('密码为必填项').test('dsa','两次密码必须一致', function (val) {
      if (this.parent.password === val) return true
      return false
    })
  }),
  handleSubmit: async (value, {props} ) => {
    // value 就是上方传入的state对象
    const { username, password } = value
    const { data: res } = await axios.post('http://api-haoke-web.itheima.net/user/registered', {username, password})
    if (res.status !== 200) return Toast.info(res.description, 2)
    Toast.info(res.description, 2)
    props.history.push('/login')
  }
})(Registe)
export default Registe
